<template>
    <div class="tabbar">
      <div class="zhanwei"></div>
      <van-tabbar v-model="active" route>
        <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="search" to="/about">分类</van-tabbar-item>
        <van-tabbar-item icon="friends-o" to="/car">购物车</van-tabbar-item>
        <van-tabbar-item icon="setting-o" to="/mine">我的</van-tabbar-item>
      </van-tabbar>
    </div>

  </template>
  <script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  let active = ref("/")
  </script>
  
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="scss">
  .zhanwei {
    height: 50px;
  }
  </style>